<template>
	<view style="padding: 10px;">
		<view class="zhiding ">
			<view class="zhiding-li" v-for="l in topData" @click="navto('pages/index/content?id='+l.id)">
				<text class="u-line-1">{{l.title}}</text>
				<view class="zhiding-bottom" >
					<view class="buttom-tag">
						<view class="zhiding-tip view-li" :style="{color:set.top_color}">{{set.top_tip}}</view>
						<view class="view-li" v-if="set.show_name==1">{{l.showname}}</view>
						<view class="view-li" v-if="set.show_time==1">{{$u.timeFormat(l.c_time)}}</view>
					</view>
					<view class="eye" v-if="set.show_view==1">
						<u-icon name="eye"></u-icon>
						<text>{{l.view}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="list-box">
			<template v-for="(l,k) in data">
				<view class="list-1 box" v-if="l.img_num<3&&(set.big==0||(k+1) % set.big != 0)" @click="navto('pages/index/content?id='+l.id)">
					<view class="left-img" v-if="l.img_num>0" :style="{width:set.left_width+'px'}">
						<image lazy-load :src="l.img" 
						
						 mode="aspectFill"></image>
					</view>
					<view class="right-con">
						<view class="title u-line-2">{{l.title}}</view>
						<view class="zhiding-bottom">
							<view class="buttom-tag">
								<view class="tag view-li" :style="{background:set.app_color}" v-if="set.show_column==1">{{l.column_name}}</view>
								<view class="view-li" v-if="set.show_name==1">{{l.showname}}</view>
								<view class="view-li" v-if="set.show_time==1">{{$u.timeFormat(l.c_time)}}</view>
							</view>
							<view class="eye" v-if="set.show_view==1"> 
								<u-icon name="eye"></u-icon>
								<text>{{l.view}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="list-2 box" v-else-if="l.img_num>=3&&(set.big==0||(k+1) % set.big != 0)" @click="navto('pages/index/content?id='+l.id)">
					<view class="title u-line-2">{{l.title}}</view>
					<view class="bottom-list">
						<image lazy-load v-for="(i,ik) in l.img_list" v-if="ik<3" :src="i"
						 mode="aspectFill"></image>
					</view>
					<view class="zhiding-bottom">
						<view class="buttom-tag">
						<view class="tag view-li" :style="{background:set.app_color}" v-if="set.show_column==1">{{l.column_name}}</view>
						<view class="view-li" v-if="set.show_name==1">{{l.showname}}</view>
						<view class="view-li" v-if="set.show_time==1">{{$u.timeFormat(l.c_time)}}</view>
						</view>
						<view class="eye" v-if="set.show_view==1">
							<u-icon name="eye"></u-icon>
							<text>{{l.view}}</text>
						</view>
					</view>
				</view>
				<view class="list-2 box" v-else-if="set.big>0&&(k+1) % set.big == 0" @click="navto('pages/index/content?id='+l.id)">
					<view class="title u-line-2">{{l.title}}</view>
					<view class="bottom-img">
						<image lazy-load :src="l.img"
						 mode="aspectFill"></image>
					</view>
					<view class="zhiding-bottom">
						<view class="buttom-tag">
						<view class="tag view-li" :style="{background:set.app_color}" v-if="set.show_column==1">{{l.column_name}}</view>
						<view class="view-li" v-if="set.show_name==1">{{l.showname}}</view>
						<view class="view-li" v-if="set.show_time==1">{{$u.timeFormat(l.c_time)}}</view>
						</view>
						<view class="eye" v-if="set.show_view==1">
							<u-icon name="eye"></u-icon>
							<text>{{l.view}}</text>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="more" v-if="!this.set.num || this.set.num==0">
			<view class="more-btn" :style="{background: set.app_color}" @click="get(page+1)" 
			v-if="hasMore&&set.more.length&&data.length">
				<view style="margin-right: 4px;margin-top: 2px;">
				<u-icon name="more-dot-fill" size="16" color="#ffffff"></u-icon>
				</view>
				{{set.more}}
			</view>
			<view v-else-if="!hasMore&&set.nomore.length" 
			style="font-size: 14px;color: #888;display: flex;flex-direction: row;justify-content: center;">
				<view style="margin-right: 4px;margin-top: 2px;">
					<u-icon name="more-dot-fill" size="16" color="#888888"></u-icon>
				</view>
					{{set.nomore}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"diy-list",
		data() {
			return {
				topData:[],
				data:[],
				page:1,
				hasMore:false
			};
		},props:{
			set:{
				type:Object,
				default:()=>{
					return {
						
					}
				}
			}
		},created() {

			this.get()
		},methods:{
			get(page){
				if(page){
					this.page = page;
				}
				let big = Number(this.set.big);
				let param = this.set;
				param.page = this.page;
				this.moxiPost("/index/app/component?component=diy_list&method=get_data",param,(data)=>{
					if(this.set.num&&this.set.num>0){
						for(let k in data.data){
							if(big>0){
								parseInt(3/4)
							}
							this.data.push(data.data[k])
						}
					}else{
						if(data.data.allpage>data.data.page){
							this.hasMore = true;
						}else{
							this.hasMore = false;
						}
						if(data.topData){
							this.topData = data.topData;
						}
						for(let k in data.data.data){
							if(big>0){
								parseInt(3/4)
							}
							this.data.push(data.data.data[k])
						}
					}
					
				})
			}
		}
	}
</script>

<style>
	.more{
		display: flex;flex-direction: row;justify-content: center;
	}
	.more-btn{
		width: 60%;text-align: center;padding: 10px;border-radius: 25px;color: #fff;
		font-size: 14px;display: flex;flex-direction: row;justify-content: center;
	}
	.eye{
		display: flex;flex-direction: row;font-size: 12px;color: #888;
	}
	.eye text{margin-left: 3px;;}
	.buttom-tag{
		display: flex;flex-direction: row;
	}
	.view{
		position: absolute;;right: 0;display: flex;flex-direction: row;
	}
	.bottom-list{
		display: flex;flex-direction: row;width: 100%;height: 70px;justify-content: space-between;margin-bottom: 5px;
	}
	.bottom-list image{
		width: 33%;height: 100%;
	}
	.bottom-list image:first-child{
		border-radius: 9px 0 0 9px;
	}
	.bottom-list image:last-child{
		border-radius: 0 9px 9px 0;
	}
	.bottom-img{
		width: 100%;
	}
	.bottom-img image{
		width: 100%;border-radius: 9px;box-shadow: 0 0 5px #e7e7e7;
	}
	.list-2{
		display: flex;flex-direction: column;
	}
	.tag{
		padding: 1px 3px;background: #ff5500;color: #fff;border-radius: 4px;font-size: 11px;
	}
	.right-con{
		flex: 1;
	}
	.title{
		font-size: 16px;color: #444;margin-bottom: 10px;
	}
	.left-img{
		width: 120px;height: 70px;flex-shrink: 0;margin-right: 10px;
	}
	.left-img image{
		max-width: 100%;max-height: 100%;border-radius: 9px;box-shadow: 0 0 5px #e7e7e7;
	}
	.list-1{
		display: flex;flex-direction: row;
	}
	.list-box{
		display: flex;flex-direction: column;
	}
.zhiding{
	display: flex;flex-direction: column;
}
.box{
	border-bottom: 1px #eee solid;margin: 8px 0;padding-bottom: 16px;
}
.box:first-child{
	margin-top: 0;
}
.box:last-child{
	border-bottom: none;
}
.zhiding-li{
	display: flex;flex-direction: column;margin-bottom: 15px
}
.zhiding-li .u-line-1{
	color: #444;font-size: 16px;;
}
.zhiding-bottom{
	display: flex;flex-direction: row;margin-top: 3px;color: #888;font-size: 12px;justify-content: space-between;
}
.view-li{
	margin-right: 6px;display: flex;flex-direction: row;
}
.zhiding-tip{
	display: flex;color: #ff5500 
}
</style>